<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	body,div,ul,p,img{
		margin:0;
		padding: 0;
		border:0;
	}

   .chuangkou{
        width: 960px;
        height: 750px;
        border:1px solid gray;
        margin:auto;
        margin-top: 100px;
        border-radius: 10px;
        position: relative;
   }
  .regExt{
  width:360px;
  height:704px;
  position: absolute;
  border:1px solid gray;
  margin-left:62.3%;
  text-align: center;
  

}

    .header{
      position: relative;
      top:-120px;

    }

   .header .toubu{
       border: 0px solid;
       width: 700px;
       height: 35px;
       position: absolute;
       top:50px;
       background-image: url(images/toubu.png);
       margin-top: 20px;
      
   }
   .header .links{
    position:absolute;
	  width: 200px;
    right: 0;
    top: 72px;
    text-align: right;
    color: #999;
    

}
   .header .links a{
	font-size: 12px;
	margin: 0 5px;
	color: #039;
	text-decoration: none;

}
.regTabs{
      height: 58px;
    padding-left: 55px;
    
}
.regTabs ul{
    width: 412px;
    height: 35px;
    background-image: url(images/tab.jpg);
    background-repeat: no-repeat;
    list-style:none;
    margin-top: 20px;
}
.regTabs li{
    width: 137px;
    height: 35px;
    float: left;
    color: 
}
.regTabs a{
    display: block;
    width: 100%;
    height: 35px;
    line-height: 35px;
    text-align: center;
    color: #555;
    font-size: 14px;

  }
  .regTabs .a1{
  display: block;
    width: 100%;
    height: 35px;
    line-height: 35px;
    text-align: center;
    color: white;
    font-size: 14px;


  }
.email{
  width: 180px;
  height: 20px;
  margin-left: 30px;


}

 .password{
   width: 280px;
   height: 20px;
   margin-left: 61px;

   

 }

.password-a{
   width: 280px;
   height: 20px;
   margin-left: 30px;

 }

 .phone{
  width: 280px;
   height: 20px;
   margin-left: 30px;


 }
 .yanzheng{
  width: 280px;
   height: 20px;
   margin-left: 15px;

 }

.mfyz{
   width: 200px;
   height: 30px;
   font-size: 16px;
   font-family: "黑体" ;
   border-radius:5px;
   margin-left:110px;
   background-color:#fff;
   color:#000;
   border: #BBB 1px solid;
   margin-top: 2px;
  

}



.big{
  width: 600px;
  height: 700px;
  border: 0px solid;
}

.div-input{
  width: 500px;
  height: 30px;
  border: 0px solid;
  margin-left:50px;
  margin-top:25px;
}

p{
font-size: 12px;
margin-left: 158px;
color: #555;

}

span{

color:red;

  }

.btnReg {
width: 119px;
height: 37px;
font-size: 16px;
font-family: "黑体";
border-radius:3px;
background:#51ad3b;
color:#fff;
border: #51ad3b 1px solid;
margin-left: 115px;
margin-top:20px;


}
.duanxin{
  width: 200px;
  height: 20px;
  margin-left: 48px;


}

a{
  text-decoration:none;
}
.footer{
    text-align: center;
    clear: both;
    height: 40px;
    line-height: 40px;
    color: #999;
  }
	</style>





</head>
<body>
   <div class="" style="width:960px;margin:0 auto;padding-top:0px;">

   <header class="header">
    <div class="toubu"></div>
    <div class="links"><a href="#">了解更多</a>|<a href="#">反馈意见</a></div>
   </header>
  
  	<div class="chuangkou">
        <p  style="background-color:#336699;font-size:15px;color:white;line-height:45px;border-top-right-radius:10px;
        border-top-left-radius:10px;padding-left:10px;margin-left:0px;">欢迎注册无限容量的网易邮箱！邮件地址可以登录使用其他网易旗下产品</p>
        <aside class="mainBody-side">
       <div class="regExt" id="adds">
       <img src="images/phone.gif" alt="邮箱大师">

       </div>
       </aside>
  	<div class="big">
    <div class="neirong">
    <div class="regTabs">
      <ul id="tabsUL" class="tabsl-on">
             <li><a tabindex="-1" href="" class="a1" style="text-decoration:none;">注册字母邮箱</a></li>
             <li><a tabindex="-1" href="" class="a2" style="text-decoration:none;">注册手机号码邮箱</a></li>
             <li><a tabindex="-1" href="" class="a3" style="text-decoration:none;">注册VIP邮箱</a></li>
      </ul>
    </div>
      <div class="div-input">
      <span>*</span>邮箱地址
      <input type="text" class="email"  > @ 
      <select style="height:25px;">
                    <option>163.com</option>
                    <option>qq.com</option>
                    <option>126.com</option>
                    </select>
                        </div>
    <p>6~18个字符，可使用字母、数字、下划线，须以字母开头</p>
      
    
    <div class="div-input">
     <span>*</span>密码
    <input type="password" class="password"></div>
    <p>6~16个字符区分大小写</p>
    
    <div class="div-input">
      <span>*</span>确认密码
      <input type="password" class="password-a"></div>
      <p>请再次填写密码</p>
    
    <div class="div-input">
      <span>*</span>手机号码
      <input type="text" class="phone">
      </div>
      <p>忘记密码时，可以通过该手机号码快速找回密码</p>

      <div class="div-input">
      <span>*</span>验证码
      <input type="text" class="duanxin">
      </div>
      <p>请填写图片中的字符，不区分大小写</p>
      <div class="div-input">
      <input type="submit" value="免费获取验证码" class="mfyz">
      </div>


      <div class="div-input">
      <span>*</span>短信验证码

      <input type="text" class="yanzheng"><br>

      </div>

      <p>请查收手机短信，并填写短信中的验证码</p>

      <div class="div-input">
      <input type="checkbox" style="margin-top:20px;margin-left:110px;margin-top:20px;">同意<a href="">"服务条款"</a>和<a href="">"隐私权相关政策"</a></div>

      <div class="div-input"><input type="button" value="立即注册"  class="btnReg"></div>
     
</div>
</div>
</div>
<footer class="footer" style="height:80px">
 <a href="#">关于网易</a>&nbsp;&nbsp;<a href="#">关于网易免费邮箱</a>
 &nbsp;&nbsp;<a href="#">邮箱官方博客</a>&nbsp;&nbsp;<a href="#">客户服务</a>
  &nbsp;&nbsp;<a href="#">隐私政策</a>&nbsp;&nbsp;|&nbsp;&nbsp;网易公司版权所有&nbsp;©&nbsp;1997-<script src=""></script>2018<br>
  数据来源，艾媒咨询《2015-2018中国个人邮箱行业研究报告》
</footer>
</body>
</html>